<!--
 * @Description:
 * @version:
 * @Author: 潘骏杰
 * @Date: 2021-11-09 15:52:56
 * @LastEditors: 潘骏杰
 * @LastEditTime: 2021-11-12 14:00:38
-->
<template>
  <div
    v-if="initial"
    class="theme-page"
    id="demo"
    v-loading="loading"
    mandala-loading-text="主题切换中..."
  >
    <div class="select">
      <m-form :inline="true" class="demo-form-inline">
        <m-form-item label="主题色">
          <m-select v-model="store.state.theme" placeholder="请选择主题" @change="changeTheme">
            <m-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </m-option>
          </m-select>
        </m-form-item>
        <m-form-item label="组件尺寸">
          <m-select v-model="store.state.size" placeholder="请选择尺寸大小" @change="changeSize">
            <m-option
              v-for="item in Sizes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.value === store.state.size"
            >
            </m-option>
          </m-select>
        </m-form-item>
      </m-form>
    </div>
    <div class="see">
      <div class="demo">
        <m-row>
          <m-button>默认按钮</m-button>
          <m-button type="primary">主要按钮</m-button>
          <m-button type="success">成功按钮</m-button>
          <m-button type="info">信息按钮</m-button>
          <m-button type="warning">警告按钮</m-button>
          <m-button type="danger">危险按钮</m-button>
        </m-row>
      </div>
      <div class="demo">
        <m-row>
          <m-button plain>朴素按钮</m-button>
          <m-button type="primary" plain>主要按钮</m-button>
          <m-button type="success" plain>成功按钮</m-button>
          <m-button type="info" plain>信息按钮</m-button>
          <m-button type="warning" plain>警告按钮</m-button>
          <m-button type="danger" plain>危险按钮</m-button>
        </m-row>
      </div>
      <div class="demo">
        <m-row>
          <m-button round>圆角按钮</m-button>
          <m-button type="primary" round>主要按钮</m-button>
          <m-button type="success" round>成功按钮</m-button>
          <m-button type="info" round>信息按钮</m-button>
          <m-button type="warning" round>警告按钮</m-button>
          <m-button type="danger" round>危险按钮</m-button>
        </m-row>
      </div>
      <div class="demo">
        <m-row>
          <m-button>默认按钮</m-button>
          <m-button size="medium">中等按钮</m-button>
          <m-button size="small">小型按钮</m-button>
          <m-button size="mini">超小按钮</m-button>
        </m-row>
      </div>
      <div class="demo">
        <m-row>
          <m-button round>默认按钮</m-button>
          <m-button size="medium" round>中等按钮</m-button>
          <m-button size="small" round>小型按钮</m-button>
          <m-button size="mini" round>超小按钮</m-button>
        </m-row>
      </div>
      <div class="demo">
        <m-row>
          <m-button icon="el-icon-search" circle></m-button>
          <m-button type="primary" icon="el-icon-edit" circle></m-button>
          <m-button type="success" icon="el-icon-check" circle></m-button>
          <m-button type="info" icon="el-icon-message" circle></m-button>
          <m-button type="warning" icon="el-icon-star-off" circle></m-button>
          <m-button type="danger" icon="el-icon-delete" circle></m-button>
        </m-row>
      </div>
      <div class="demo">
        <m-link href="" target="_blank">默认链接</m-link>
        <m-link type="primary">主要链接</m-link>
        <m-link type="success">成功链接</m-link>
        <m-link type="warning">警告链接</m-link>
        <m-link type="danger">危险链接</m-link>
        <m-link type="info">信息链接</m-link>
      </div>
      <div class="demo">
        <m-radio-group v-model="radio1">
          <m-radio-button label="上海"></m-radio-button>
          <m-radio-button label="北京"></m-radio-button>
          <m-radio-button label="广州"></m-radio-button>
          <m-radio-button label="深圳"></m-radio-button>
        </m-radio-group>
      </div>
      <div class="demo">
        <m-tabs v-model="activeName" @tab-click="() => {}">
          <m-tab-pane label="用户管理" name="first">用户管理</m-tab-pane>
          <m-tab-pane label="配置管理" name="second">配置管理</m-tab-pane>
          <m-tab-pane label="角色管理" name="third">角色管理</m-tab-pane>
          <m-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</m-tab-pane>
        </m-tabs>
      </div>
      <div class="demo">
        <m-badge :value="12" class="item">
          <m-button size="small">评论</m-button>
        </m-badge>
        <m-badge :value="3" class="item">
          <m-button size="small">回复</m-button>
        </m-badge>
        <m-badge :value="1" class="item" type="primary">
          <m-button size="small">评论</m-button>
        </m-badge>
        <m-badge :value="2" class="item" type="warning">
          <m-button size="small">回复</m-button>
        </m-badge>
      </div>
      <div class="demo">
        <m-radio-group v-model="size">
          <m-radio label="">默认</m-radio>
          <m-radio label="medium">中等</m-radio>
          <m-radio label="small">小型</m-radio>
          <m-radio label="mini">超小</m-radio>
        </m-radio-group>

        <m-descriptions class="margin-top" title="带边框列表" :column="3" :size="size" border>
          <template slot="extra">
            <m-button type="primary" size="small">操作</m-button>
          </template>
          <m-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              用户名
            </template>
            kooriookami
          </m-descriptions-item>
          <m-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              手机号
            </template>
            18100000000
          </m-descriptions-item>
          <m-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              居住地
            </template>
            苏州市
          </m-descriptions-item>
          <m-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              备注
            </template>
            <m-tag size="small">学校</m-tag>
          </m-descriptions-item>
          <m-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              联系地址
            </template>
            江苏省苏州市吴中区吴中大道 1188 号
          </m-descriptions-item>
        </m-descriptions>

        <m-descriptions class="margin-top" title="无边框列表" :column="3" :size="size">
          <template slot="extra">
            <m-button type="primary" size="small">操作</m-button>
          </template>
          <m-descriptions-item label="用户名">kooriookami</m-descriptions-item>
          <m-descriptions-item label="手机号">18100000000</m-descriptions-item>
          <m-descriptions-item label="居住地">苏州市</m-descriptions-item>
          <m-descriptions-item label="备注">
            <m-tag size="small">学校</m-tag>
          </m-descriptions-item>
          <m-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</m-descriptions-item>
        </m-descriptions>
      </div>
      <div class="demo">
        <m-pagination background layout="prev, pager, next" :total="1000"> </m-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import store from '../../store/index'
export default {
  data() {
    return {
      store,
      initial: true,
      options: [
        {
          value: 'default',
          label: '默认主题'
        },
        {
          value: 'innovationGreen',
          label: '创新绿主题'
        },
        {
          value: 'sunLight',
          label: '阳光明亮主题'
        }
      ],
      Sizes: [
        {
          value: 'default',
          label: '默认'
        },
        {
          value: 'medium',
          label: '中号'
        },
        {
          value: 'small',
          label: '小号'
        },
        {
          value: 'mini',
          label: '超小号'
        }
      ],
      radio1: '上海',
      loading: false,
      size: '',
      activeName: 'second'
    }
  },

  methods: {
    changeTheme(theme) {
      this.loading = true
      if (this.loading) {
        setTimeout(() => {
          store.reducers.changeTheme(theme)
          this.loading = false
        }, 500)
      }
    },
    changeSize(size) {
      this.loading = true
      store.reducers.changeSize(size)
      if (this.loading) {
        setTimeout(() => {
          this.loading = false
          this.reloadPage()
        }, 500)
      }
    },
    reloadPage() {
      this.initial = false
      this.$nextTick(() => {
        this.initial = true
      })
    },
  }
}
</script>
<style scoped lang="scss">
.demo {
  width: 100%;
  padding: 20px 0 0;
  .item {
    margin-top: 10px;
    margin-right: 40px;
  }
}
</style>
